<template>
  <view class="parent">
    <scroll-view :scroll-y="true" class="background">
      <view class="background-top" style="background-image: url('/payroll/img/gongzitiaobeijing.png')" />
      <view class="mid">
        <view class="content-view-row">
          <view class="content-view">
            <view class="content-item-value">{{ BillInfo.salaryReal != null ? BillInfo.salaryReal/100 : '--' }}</view>
            <view class="content-item-des">本月应发工资</view>
          </view>
          <picker mode="date" fields="month" @change="selectDateChange">
            <view class="content-item-date">
              <view class="dateline">
                {{ selectDate[0]+ "年" + selectDate[1] + "月" }}
                <img src="/payroll/img/xiala.png" alt="">
              </view>
            </view>
          </picker>
        </view>

        <view class="content-view-overview">
          <view class="content-view-overview-item">
            <view class="content-item-overview-value">{{ BillInfo.workingDays!= null ? BillInfo.workingDays : '--' }}</view>
            <view class="content-item-overview-des">出勤天数</view>
          </view>
          <view class="content-view-overview-item">
            <view class="content-item-overview-value">{{ BillInfo.salaryBasic!= null ? BillInfo.salaryBasic/100 : '--' }}</view>
            <view class="content-item-overview-des">基本工资</view>
          </view>
          <view class="content-view-overview-item">
            <view class="content-item-overview-value">{{ BillInfo.overtimePay != null ? BillInfo.overtimePay/100 +'.00': '--' }}</view>
            <view class="content-item-overview-des">加班费</view>
          </view>
        </view>

        <view class="content-view-content">
          <view v-for="(item, index) in items" :key="index">
            <view class="content-item">
              <view class="content-item-left">{{ item.name }}</view>
              <view class="content-item-right">{{ BillInfo[item.parameter] != null ? BillInfo[item.parameter]/100 : '0.00' }} 元</view>
            </view>
            <view v-if="index < items.length-1" class="line" />
          </view>
        </view>

        <view v-if="!confirmed" class="content-button-view" style="background-image: url('/payroll/img/di.png')">
          <view class="content-button-content1" @click="somethingWrongBtnClick(true)">
            <view class="content-button-title1">对工资有异议？</view>
          </view>

          <button class="content-button-content2" @click="confirmBtnClick">
            <view class="content-button-title2">工资确认</view>
          </button>
        </view>
        <view v-else class="content-button-view">
          <view class="content-button-content3" @click="confirmBtnClick">
            <view class="content-button-title2">工资已确认</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view v-if="show_something_wrong" class="something-wrong-des">
      <view class="content-view-des-background">
        <view class="something-wrong-img" style="background-image: url('/payroll/img/karton1.png')" />
        <view class="something-wrong-title">对工资有异议？</view>
        <view class="something-wrong-d">如工资明细有问题，请联系公司人事、重新核对工资并下发工资条</view>
        <view class="content-button-ok" @click="somethingWrongBtnClick(false)">
          <view class="content-button-ok-title">我知道啦^_^</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import DatePicker from "@/components/uni-calendar/uni-datepicker.vue"
import { listSalaryBills, getSalaryBillRelationLast } from '@/services/salaryBill'
export default {
  components: {
    DatePicker
  },
  data() {
    return {
      companyId: '',
      confirmed: false,
      show_something_wrong: false,
      BillInfo: {},
      items: [
        { name: "团队提成", parameter: "teamCommission" },
        { name: "补贴福利", parameter: "subsidy" },
        { name: "迟到扣款", parameter: "lateDed" },
        { name: "早退扣款", parameter: "leaveDed" },
        { name: "未打卡扣款", parameter: "uncheckedDed" },
        { name: "旷工扣款", parameter: "absenteeismDed" },
        { name: "综合扣款", parameter: "overallDed" }
      ],
      selectDate: []
    };
  },
  created(){
    var date = new Date();
    this.selectDate = [date.getFullYear(), date.getMonth() + 1]
    // TODO实际年月查询工资
    this.getSalaryBillRelationLast(this.selectDate[0], this.selectDate[1])
  },
  methods: {
    getSalaryBillRelationLast(year, month){
      this.companyId = uni.getStorageSync("companyId")
      this.userId = uni.getStorageSync("employeeId")
      var dataparams = {
        companyId: this.companyId,
        empId: this.userId,
        month: month,
        year: year,
        id: ''
      }
      getSalaryBillRelationLast(dataparams).then(res => {
        this.BillInfo = res
      })
    },
    getlistSalaryBills(){
      listSalaryBills().then(res => {
        console.log('debug log --> ', res)
      })
    },
    getCurrentDate(){
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      this.currentData = y + '年' + m + '月'
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
    },
    selectDateChange: function(e) {
      this.selectDate = e.detail.value.split("-")
      this.getSalaryBillRelationLast(this.selectDate[0], this.selectDate[1])
    },
    somethingWrongBtnClick: function(show) {
      this.show_something_wrong = show;
    },
    confirmBtnClick: function() {
      if (!this.confirmed) {
        this.confirmed = true;
      } else {
        console.log("工资已确认");
      }
    }
  }
};
</script>

<style lang="scss">
.content-view {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.content-view-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding:0 20px;
  z-index: 1;
}
  .content-record-go {
    margin-right: 20px;
    width: 18px;
    height: 18px;
  }
.content-view-overview {
  display: flex;
  flex-direction: row;
  // background-image: url('/payroll/img/di.png');
  background-size:cover;
  // background: #ffffff;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
  padding-right: 24px;
  padding-left: 24px;
  border-radius: 10px;
  width: calc(100% -20px);
  height: 92px;
  margin-top: 20px;
  z-index: 1;
}
.content-view-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  margin-bottom: 90px;
  margin-left: 20px;
  margin-right: 20px;

  border-radius: 10px;
  width: calc(100% -20px);
  // height: 378px;
  margin-top: 15px;
}
.line {
  background: #e5e5e5;
  margin-left: 20px;
  margin-right: 20px;
  height: 1px;
  width: calc(100% -20px);
}
.content-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 54px;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.content-item-left {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  // line-height: 36px;
  // text-align: center;
  color: #666666;
}
.something-wrong-img {
  // background-image: url('/payroll/img/karton1.png');
  background-size:cover;
  background-size:100% 100%;
  height: 122px;
  margin: 24px;
  width: calc(100% -246px);
}
.something-wrong-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  color: $theme;
  margin-bottom: 8px;
}
.something-wrong-d {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  margin-left: 33px;
  margin-right: 33px;
  margin-bottom: 28px;
  // line-height: 36px;
  color: #aaaaaa;
}
.content-item-right {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  // line-height: 36px;
  // text-align: center;
  color: #000000;
}
.content-view-overview-item {
  display: flex;
  flex-direction: column;
  // flex: 1;
  justify-content: center;
  // align-items:center;
  height: 92px;
}
.background {
  background-color: rgb(245, 245, 245);
}
.background-top {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 160px;
  // background-image: url('/payroll/img/gongzitiaobeijing.png');
  background-size:contain;
  background-size:100% 100%;
}
.mid {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.parent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.something-wrong-des {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.712);
}
.content-view-des-background {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  margin-left: 55px;
  margin-right: 55px;
  margin-top: 130px;

  border-radius: 10px;
  width: calc(100% -55px);
}
.content-item-value {
  // margin-left: 20px;
  font-size: 36px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;

  // line-height: 36px;
  // text-align: center;
  color: $white;
}

.content-item-overview-value {
  // margin-left: 20px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  // line-height: 36px;
  // text-align: center;
  color: #000000;
}
.content-item-overview-des {
  // margin-left: 20px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  // line-height: 36px;
  // text-align: center;
  color: #666666;
}

.content-item-des {
  // margin-left: 10px;
  font-size: 14px;
  // line-height: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: $white;
}

.content-item-date {
  display: flex; //将对象作为弹性伸缩盒显示
  flex-direction: column;
  justify-content: center;
  margin-top: 25px;

  // border:2px solid;
  // border-radius:25px;
  border-radius: 25px;
  background-image: linear-gradient(-90deg, #805b36, #492e19);
  // background: #492E19;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 15px;
  height: 32px;
  // line-height: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: $white;
  .dateline{
    display:flex;
    align-items: center;
    img{
      width:12px;
      height:12px;
    }
  }
}

.content-button-view {
  bottom: 0%;
  width: 100%;
  background: $white;
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 49px;
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 1;
}
.content-button-content1 {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: #f9f9f9;
  border-style: solid;
  border-color: #e5e5e5;
  border-width: 1px;
  border-radius: 10px;
  height: 50px;
  // margin-right: 7px;
  margin-left: 15px;
}
.content-button-ok {
  display: flex;
  flex-direction: row;
  // flex: 1;
  justify-content: center;
  align-items: center;
  background: $theme;
  height: 44px;
  margin-left: 51px;
  margin-right: 51px;
  margin-bottom: 36px;
  border-radius: 25px;
}
.content-button-ok-title {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
.content-button-content2 {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: $theme;
  height: 50px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
.content-button-content3 {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: #ff9b2063;
  height: 50px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
.content-button-ima {
  width: 24px;
  height: 24px;
}
.content-button-title1 {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.content-button-title2 {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
</style>
